<template>
  <div>
    <!-- 头部 -->
    <div class="header_box">黑马程序员</div>
    <!-- 路由占位符 -->
    <router-view />
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/home">
        <i slot="icon" class="iconfont icon-index-fill"></i>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/member">
        <i slot="icon" class="iconfont icon-icon_zhanghao"></i>
        <span>会员</span>
      </van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="shopping-cart-o" info="5">购物车</van-tabbar-item>
      <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2
    };
  },

  methods: {},

  created() {}
};
</script>

<style lang='less' scoped>
.header_box {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(90deg, #fe359a 0, #f4f60c 100%); /* W3C */
  text-align: center;
  font-size: 14px;
  color: #fff;
}
</style>
